<script setup lang="ts">
import icons from './icon.json'
import {isNotEmpty, renderIcon} from "@/utils";

interface Props {
  size?: 'tiny' | 'small' | 'medium' | 'large'
  value?: string,
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  disabled: false,
  value: undefined
})
const emits = defineEmits(['update:value']);
const iconOptions = ref<string[]>(icons)
const searchIcon = ref('')
watch(searchIcon, () => {
  if (searchIcon.value) {
    iconOptions.value = icons.filter(icon => icon.includes(searchIcon.value))
  } else {
    iconOptions.value = icons
  }
})
const handleClickIcon = (icon: string) => {
  emits('update:value', `lucide:${icon}`)
}
</script>

<template>
  <n-popover
      trigger="click"
      placement="bottom-start"
      :disabled="props.disabled"
  >
    <template #trigger>
      <n-button vertical-middle :size="props.size" :disabled="props.disabled">
        <template v-if="value" #icon>
          <component :is="renderIcon(value)"/>
        </template>
        <template #default>{{ isNotEmpty(value) ? value : "选择图标" }}</template>
      </n-button>
    </template>
    <template #header>
      <n-input size="small" v-model:value="searchIcon" clearable/>
    </template>
    <template #default>
      <n-scrollbar max-h-300px>
        <n-grid v-if="iconOptions.length > 0" :cols="5">
          <template v-for="icon in iconOptions">
            <n-gi>
              <n-tooltip trigger="hover" placement="bottom" content-style="padding: 0">
                <template #trigger>
                  <n-button text @click="handleClickIcon(icon)" w-8 h-8>
                    <template #icon>
                      <component :is="renderIcon(`lucide:${icon}`, {size: 30})"/>
                    </template>
                  </n-button>
                </template>
                <span>{{ `lucide:${icon}` }}</span>
              </n-tooltip>
            </n-gi>
          </template>
        </n-grid>
        <n-empty v-else description="无数据"/>
      </n-scrollbar>
    </template>
    <template v-if="value" #footer>
      <div text-center>{{ value }}</div>
    </template>
  </n-popover>
</template>

<style scoped>

</style>
